<template>
  <div class="box">
    <div class="top"><span>用户管理</span>/会员管理</div>

     <main>
      <div class="inp">
        <span>片区名称</span>

        <el-select v-model="value1" class="m-2" placeholder="全部" size="small">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span>租房类型</span>
        <el-select v-model="value2" class="m-2" placeholder="全部" size="small">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-button
          type="primary"
          round
          @click="shaixuan"
          style="
            width: 85px;
            height: 25px;
            border-radius: 8px;
            margin-left: 50px;
          "
          >筛选</el-button
        >

        <el-input
          v-model="input3"
          class="w-50 m-2"
          size="small"
          placeholder="请输入租房编号"
          style="width: 300px; height: 24px; margin-left: 60px"
          :suffix-icon="Search"
          @blur="search"
        />

        <el-button
          type="primary"
          round
          style="
            width: 85px;
            height: 25px;
            border-radius: 8px;
            margin-left: 26px;
          "
           @click="dialogVisible = true"
          ><el-icon style="font-size: 12px"><CirclePlus /></el-icon>
          <span
            style="
              font-size: 12px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              color: #f6f6f6;
              line-height: 21px;
            "
            >添加</span
          >
        </el-button>
        <div class="add">
          <el-dialog
            v-model="dialogVisible"
            title="新增会员信息"
            width="40%"
            :before-close="handleClose"
          >
        
            <p>
              <span>姓名:</span>
              <el-input v-model="nameinput" placeholder=" 请输入文字" />
            </p>
            <p>
              <span> 性别:</span>
              <el-select v-model="sex" class="m-2" placeholder="请选择">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </p>
            <p>
              <span> 联系电话:</span>

              <el-input v-model="phoneinput" placeholder=" 请输入数字" />
            </p>
            <p>
              <span>租房编号:</span>
              <el-input v-model="numinput" placeholder=" 请输入数字" />
            </p>
            <p>
              <span>租房地址:</span>
              <el-input v-model="ipinput" placeholder=" 请输入数字" />
            </p>

            <p>
              <span>订单创建日期： </span>
              <el-date-picker
                v-model="time"
                type="date"
                placeholder="Pick a day"
                :size="size"
              />
            </p>
            <p>
              <span> 长租/短租:</span>
              <el-select v-model="long" class="m-2" placeholder="请选择">
                <el-option label="长租" value="长租" />
                <el-option label="短租" value="短租" />
              </el-select>
            </p>
            <p>
              <span>租房负责人:</span>
              <el-input v-model="pce" placeholder=" 请输入数字" />
            </p>

            <p class="msg" v-show="show">必须输入订单类型,姓名和收入</p>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save"> 保存 </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
   
      </div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="sex" label="性别" align="center"/>
        <el-table-column prop="phone" label="电话" align="center" />
        <el-table-column
          prop="id"
          label="租房编号"
          width="150"
          align="center"
        />
        <el-table-column prop="ip" label="租房住址" align="center" />
        <el-table-column prop="time" label="入住时间" align="center" />
        <el-table-column prop="long" label="长租/短租" align="center" />
        <el-table-column prop="peo" label="租房负责人" align="center" />
        <el-table-column prop="operate" label="操作" width="180" align="center">
          <template #default="scope">
            <div class="flex justify-space-between mb-4 flex-wrap gap-4">
              <el-button>编辑 </el-button>

              <el-popconfirm
                title="确定要删除吗?"
                @confirm="confirm(scope.row.id)"
                @cancel="cancel"
              >
                <template #reference>
                  <el-button>删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        layout="prev,pager,next"
        :total="total"
        @current-change="pagecheng"
      />
    </main>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import axios from "axios";
import "@/mock/vip";
import { ElMessage, ElMessageBox } from "element-plus";
let page = 1;

const nameinput = ref();
const numinput = ref();
const sex = ref();
const phoneinput = ref();
const ipinput = ref()
const time = ref();
const long = ref()
const size = ref<"default">("default");
const pce = ref()
let show = ref(false);
const value1 = ref("");
const value2 = ref("");
const input3 = ref("");
const options1 = [
  {
    value: "上城区",
    label: "上城区",
  },

  {
    value: "西湖区",
    label: "西湖区",
  },
  {
    value: "拱墅区",
    label: "拱墅区",
  },
  {
    value: "下沙区",
    label: "下沙区",
  },
];
const options2 = [
  {
    value: "长租",
    label: "长租",
  },
  {
    value: "短租",
    label: "短租",
  },
];

interface ItemType {
  id: number;
  name: string;
  ip: any;
  long: any;
  peo: any;
  operate: any;
  sex: any;
  phone: number;
  time: number;
}

const tableData = ref<ItemType[]>([]);
const total = ref<number>(0);
onMounted(() => {
  getData(1);
  getpull()
});
const getpull = () => {
  axios
    .post("/api/vip/sousuo", {
      pageSize: 10,
      current: page,
      city: value1.value,                                   
      long: value2.value,
      sousuo: input3.value,
    })
    .then((res) => {
      tableData.value = res.data.result;
      total.value = res.data.count;
    });
}
const getData = (page: number) => {
  axios
    .post("/api/vip", {
      pageSize: 10,
      current: page,
      city: value1.value,                                   
      long: value2.value,
      sousuo: input3.value,
    })
    .then((res) => {
      tableData.value = res.data.result;
      total.value = res.data.count;
    });
};
const pagecheng = (page: number) => {
  getData(page);
};

const shaixuan = () => {
  getData(1);
};
const search = () => {
 getpull()
};

const confirm = (id: any) => {
  axios
    .post("/api/pos/del", {
      id: id,
    })
    .then((res) => {
      getData(1);
    });
};
const cancel = () => {
  console.log("取消");
};


const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确认关闭吗?您的内容还未保存")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const save = () => {
  axios
    .post("/api/vip/add", {
      id: numinput.value,
      time: new Date(time.value).getTime(),
      name: nameinput.value,
      sex: sex.value,
      phone: phoneinput.value,
      ip:ipinput.value,
      peo:pce.value,
      long:long.value

    })
    .then((res) => {
      if (res.data.status === 0) {
        getData(1);
      } else {
        show.value = true;
        dialogVisible.value = true;
      }
    });

  dialogVisible.value = false;
};
</script>

<style lang="less" scoped>
.top span {
  color: #888888;
}
.top {
  font-size: 12px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  line-height: 21px;
  margin-bottom: 20px;
  margin-left: 16px;
  margin-top: 16px;
  font-weight: bolder;
}
.box {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
}
main {
  height: 100%;
  background: #ffffff;
  border-radius: 8px;
  margin: 16px;
  padding-top: 25px;
}
:deep(.el-input__wrapper) {
  width: 151px;
  background-color: #f6f6f6;
  border-radius: 22px;
  margin-left: 16px;
  margin-right: 33px;
}
:deep(.el-input__inner) {
  font-size: 12px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #888888;
  line-height: 21px;
}
.inp {
  margin-left: 17px;
  position: relative;
  margin-bottom: 40px;
}
.el-pagination {
  margin-top: 10px;
  justify-content: flex-end;
  margin-bottom: 10px;
}
:deep(th.el-table__cell) {
  background-color: #4ca4fe;
  color: #fff;
}
.add {
      p {
        width: 100%;
        height: 30px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        font-size: 16px;
      }
      span {
        display: inline-block;
        width: 120px;
      }
      .el-input {
        width: 200px;
      }
      .dialog-footer button:first-child {
        margin-right: 60px;
        margin-top: -60px;
      }
      .dialog-footer button:last-child {
        margin-right: -15px;
        margin-top: -88px;
        border: 0;
        background-color: #ff8f4d;
      }
      .msg {
        text-align: center;
        color: red;
        font-size: 20px;
      }
    }
</style>
